<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>INDEX</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div id="app" align="center">
    <!--<h2>下列格式以 2099 01 01 为例</h2>
    <form>
        机器码 :<input type="text" name="code" v-model="form.code" placeholder="格式：3C-F8-62-C8-F2-A3" value=""><br>
        年 份 :<input type="text" name="year" v-model="form.year" placeholder="格式：99" value=""><br>
        月 份 :<input type="text" name="month" v-model="form.month" placeholder="格式：1" value=""><br>
        日 期 :<input type="text" name="day" v-model="form.day" placeholder="格式：1" value=""><br>
        <button onclick="decode()">提交</button>
    </form>-->
    <div class="row clearfix" style="width: 600px; height: 200px; margin: auto; margin-top: 20px">
        <div class="col-md-12 column">
            <!-- 使用form后端就必须返回json才能回调 -->
            <form role="form" id="form">
                <div class="form-group">
                    <label>机器码：</label><input type="text" class="form-control" id="code"/>
                </div>
                <div class="form-group">
                    <label>年 份：</label><input type="password" class="form-control" id="year"/>
                </div>
                <div class="form-group">
                    <label>月 份：</label><input type="password" class="form-control" id="month"/>
                </div>
                <div class="form-group">
                    <label>日 期：</label><input type="password" class="form-control" id="day"/>
                </div>
                <button style="width: 100px" id="getCode" type="button" class="btn btn-success">获取</button>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $("#getCode").click(function () {
            var urlPath = window.document.location.href;
            var param = {
                code: $("#code").val(),
                year: $("#year").val(),
                month: $("#month").val(),
                day: $("#day").val()
            }
            console.log(param)
            $.ajax({
                type: 'POST',
                url: urlPath + "decode",
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(param),
                success: function (result) {
                    console.log(result.data)
                    //拼接表格的行和列
                    str = "<h1>" + result.data + "</h1>";
                    //追加到table中
                    $("#form").append(str);
                }
            });
        });
    });


</script>
<script>
    // Usage
    /*new Vue({
        el: "#app",
        data: {
            form: {
                code: "",
                year: "",
                month: "",
                day: ""
            }
        },
        method: {
            decode() {
                console.log('aa')
                axios.post('http://127.0.0.1:8080/decode', this.form)
                    .then(response => (this.info = response))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }

        }
    })*/
</script>
</body>
</html>
